<template>
  <svg width="54px" height="54px">
    <circle class="avatar_svg" cx="51" cy="51" r="49" style="stroke-dashoffset:0;" stroke="#EAEFF4" fill="none"
      stroke-linejoin="round" stroke-linecap="round" />
    <circle class="avatar_svg" cx="51" cy="51" r="49" stroke="#3F8CFF" stroke-linejoin="round" stroke-linecap="round"
      :style="{ 'stroke-dashoffset': schedule }" />
  </svg>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
const props = defineProps<{ schedule: string }>()
const schedule = ref(320);

onMounted(() => {
  schedule.value = 320 - (32 * (parseInt(props.schedule) / 10)) < 0 ? 0 : 320 - (32 * (parseInt(props.schedule) / 10))
})

</script>

<style lang="scss" scoped>
.avatar_svg {
  // cy: 25;
  // cx: 25;
  // r: 20;
  width: 50px;
  height: 50px;
  stroke-width: 4;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  fill: none;
  // stroke: #3F8CFF;
  transform: scale(.5);
  transition: .5s linear;
}
</style>